<template>
    <div class="person-analysis-container paddingSet">
      <div class="person-analysis">
        <div class="person-analysis-item person-analysis-search flex-container" style="height: 40px;">
          <div class="flex-container">
            <el-radio-group size="small" v-model="timeFlow" @change="dateSelect">
              <el-radio-button label="1" >最近1周</el-radio-button>
              <el-radio-button label="2" >最近1月</el-radio-button>
              <el-radio-button label="3" >最近3月</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex-container" style="margin: 0 30px;color:#333333;">
            <label class="mineSetLabel" style="color:#333333;">选择日期</label>
            <el-date-picker
              style="width: 250px;"
              size="small"
              v-model="timeRange"
              value-format="yyyy-MM-dd"
              @change="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="person-analysis-item person-analysis-dataShow flex-container boederSet" style="width: 20%">
          <div class="flowContainer-item"  >
            <div class="flowContainer-content flex-container" >
              <div class="container-content flex-container space-between">
                <div>客流量</div>
                <div class="" style="font-size: 18px;font-weight: bold">{{flowContainerInfo.passengerFlowNum}}人</div>
              </div>
              <div class="container-content flex-container">
                <div>上次时间:</div>
                <div>{{flowContainerInfo.lastTimePassengerFlowNum}}</div>
              </div>
              <div class="container-content flex-container">
                <div class="" style="margin-right: 12px;">环比</div>
                <div class="flex-container">
                  <div :class="{ 'colorUp':flowContainerInfo.flag ==true ,'colorDown':flowContainerInfo.flag == false}">
                    <!--<span style="font-size: 18px;">+</span>-->
                    <span style="margin: 0 6px 0 3px;">{{flowContainerInfo.ringRatioNum *100}}%</span>
                  </div>
                  <!--<div class="colorDown">-->
                    <!--<span style="font-size: 18px;">-</span>-->
                    <!--<span style="margin: 0 6px 0 3px;">{{flowContainerInfo.ringRatioNum}}</span>-->
                  <!--</div>-->
                  <div>
                    <img v-if="flowContainerInfo.flag ==true" src="../../../../images/marketSale/Up-icon.png" height="11" width="23"/>
                    <img v-else src="../../../../images/marketSale/Down-icon.png" height="11" width="23"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="person-analysis-item person-analysis-echarts boederSet paddingSet">
          <div class="analysis-echarts-item analysis-echarts-search">
            <el-radio-group size="mini">
              <el-radio-button label="到店客数"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="analysis-echarts-item">
            <div id="setAnalysisEcharts" style="height: 300px;"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import * as opearte from 'api/getData'
  export default {
    name: "person-analysis",
    data(){
      return {
        flowContainerInfo: {},
        timeFlow:1,
        timeRange:[]
      }
    },
    props:['channelId'],
    mounted(){
      this.dateSelect('1')
    },
    methods:{
      dateSelect(val){
        if(!this.timeRange){
          this.timeFlow = '1'
          this.timeRange = []
        }else {
          if(typeof(val) == 'string'){
            this.timeRange = []
          }else {
            this.timeFlow = undefined
          }
        }

        let param = {
          num:this.timeFlow,
          shopId:this.channelId,
          fromDate:this.timeRange[0],
          endDate:this.timeRange[1]
        }
        opearte.getShopFlow(param).then(res => {
          this.flowContainerInfo = res.data
          this.setAnalysisEcharts()

        })
      },
      setAnalysisEcharts(){
        let myChart = this.$echarts.init(document.getElementById('setAnalysisEcharts'))
        let option = {
          tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              data : this.flowContainerInfo.dayPFList.map(item => item.time)
            }
          ],
          yAxis : [
            {
              type: 'value',
              name: '客流量(人)'
            }
          ],
          series : [
            {
              name:'客流量',
              type:'line',
              smooth:true,
              stack: '总量',
              itemStyle: {
                color: '#64bef5'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#64bef5'
                  }, {
                    offset: 1, color: '#daeffd'
                  }],
                  globalCoord: false
                }
              },
              data:this.flowContainerInfo.dayPFList.map(item => item.passengerFlowNum)
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  }
</script>

<style scoped>
  .person-analysis, .person-analysis-echarts{
    display: flex;
    flex-direction: column;
  }
  .colorUp{
    color: #ff2354;
    font-weight: bold;
  }
  .colorDown{
    color: #05c459;
    font-weight: bold;
  }
  .person-analysis-dataShow{
    margin: 10px 0px 12px 0px;
  }
  .flowContainer-item{
    padding: 12px;
  }
  .flowContainer-content{
    flex-direction: column;
    padding-right: 12px;
    border-right: 1px solid #E0E8EF;
  }
  .flowContainer-item:last-child .flowContainer-content{
    border-right: none;
  }
  .container-content{
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  .flowContainer-item{
    flex: 1;
  }
</style>
